<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
            background-color: cornflowerblue;
        }
        .font1{
            color: aqua;
            size: 50px;
            display: inline
        }
        .h1{
            color: gray;
            size: 50px;
        }
        .div{
            color: rgb(0, 0, 0);
            size: 50px;
        }
    </style>
</head>
<body>
    <h1 class="h1"><p class="font1">《</p>三国演义<p class="font1">》</p></h1>
    <div class = "div"><p class="font1">“</p>滚滚长江东逝水，浪花淘尽英雄。<br>
                                        是非成败转头空。青山依旧在，几度夕阳红。 <br>
                                        白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。<br>
                                        古今多少事，都付笑谈中。 
                                        <p class="font1">”</p></div>
    <h2 id = "h2">黄巾起义 <p class="font1">-></p> 
                董卓之乱 <p class="font1">-></p> 
                群雄逐鹿 <p class="font1">-></p>
                三国鼎立 <p class="font1">-></p>
                三国归晋</h2>
    <div class="new"></div>
    <script>
        console.log(document.getElementById("h2"))
        console.log(document.getElementsByClassName("font1"))
        console.log(document.getElementsByTagName("div"))
        let newt = document.createElement('div');
        newt.className = 'new';
        newt.textContent = '青梅煮酒论英雄';
        let newts = document.getElementsByClassName("new")
        newts[0].appendChild(newt);
    </script>
</body>
</html>